import {
  Component,
  ElementRef,
  OnDestroy,
  ViewChild,
  Input,
  ChangeDetectionStrategy, ViewEncapsulation, OnInit,
} from '@angular/core';
import {ToolsService} from "../../service/tools/tools.service";
import {Subject} from "rxjs";

import {AuthService} from "../../service/auth/auth.service";

import {FeedCommentRespVO} from "@interface/index";
import * as API from "@api/index";
import {HttpService} from "@core/http/http.service";

@Component({
  selector: 'seed-comments',
  templateUrl: './comments.component.html',
  styleUrls: ['./comments.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None
})
export class CommentsComponent implements OnDestroy, OnInit {
  @Input() comments: FeedCommentRespVO[];
  @Input() hasMoreData;
  @Input() isShowTitle = true;

  @ViewChild('commentDigg') commentDigg: ElementRef;
  unSubscription: Subject<void> = new Subject<void>();
  scrollContainer;
  @Input() maxContentLength = 170;
  public params = {
    commentId: 0
  };

  constructor(public user: AuthService,
              public tools: ToolsService,
              private _http: HttpService) {
    // this.params.userId = this.user.getUserId();
  }

  handleDigg(comment, e) {
    if (!this.user.hasLoggedIn() && !this.user.getUserId()) {
      this.tools.showToast('登录之后才可进行此操作', 1000);
    }
    this.params.commentId = comment.commentId;
    const target = e.target;
    const diggCount = +target.innerText;
    if (!target.classList.contains('thumb')) {
      const url = API.FEED_ARTICLE_COMMENT_DIGG_URL;
      this._http.postUrlencode(url, this.params).map((res) => res.json()).subscribe(res => {
        if (res.result === '0') {
          target.innerText = diggCount + 1;
          target.classList.add('thumb');
          this.tools.showToast('点赞成功', 1000);
        }
      });
    }
    // else {
    //   const url = API.FEED_ARTICLE_COMMENT_DIGG_URL + '?' + this.tools.param(this.params);
    //   this._http.delete(url).map((res) => res.json()).subscribe(res => {
    //     if (res.result === '0') {
    //       target.innerText = diggCount - 1;
    //       target.classList.remove('thumb');
    //       this.tools.showToast('取消成功', 1000);
    //     }
    //   });
    // }
  }

  getContent(content) {
    if (content && content.length > this.maxContentLength) {
      return content.substring(0, this.maxContentLength) + '...';
    }
    return content;
  }

  showMore(originContent: string, itemIndex: number, $event) {
    $event.preventDefault();
    let targetDom = $event.currentTarget.parentElement.previousElementSibling;
    let currentTarget = $event.currentTarget;
    targetDom.innerHTML = originContent;
    currentTarget.nextElementSibling.style.display = 'block';
    currentTarget.style.display = 'none';
  }

  showLess(originContent: string, itemIndex: number, $event) {
    $event.preventDefault();
    let targetDom = $event.currentTarget.parentElement.previousElementSibling;
    let currentTarget = $event.currentTarget;
    targetDom.innerHTML = originContent.substring(0, this.maxContentLength) + '...';
    currentTarget.previousElementSibling.style.display = 'block';
    currentTarget.style.display = 'none';
  }

  ngOnInit() {
    this.scrollContainer = document.querySelector('#seed-scroll-content');
  }

  ngOnDestroy() {
    this.unSubscription.next();
    this.unSubscription.complete();
  }

}
